/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, InputLine, Input, Table, TableHead, TableRow, CCell, TableBody, LineColumn,
} from "customize-easy-ui-component";
import {
    InspectRecordLayout, InternalItemProps, RepLink, SelectHookfork, useItemInputControl,
} from "../../common/base";
import {useMeasureInpFilter} from "../../common/hooks";
import {Each_ZdSetting, useTableEditor} from "../../hook/useRepTableEditor";

const tail间隙= <Text css={{"@media print": {fontSize: '0.75rem'}}}>
    注：<br/>
    1、A3.2.5.1项可以抽取基站、端站以及至少20%其他层站的层门进行检验；<br/>
    2、所检验的站需填写在相应栏中，测量结果符合要求的，在测量结果栏填所测量的数值区间范围（min-max），并在相应项目检验结果内打“√”；测量结果有不符合要求的，需在相应的站填写不合格的观测数据，并在相应项目检验结果中打“×”；
</Text>;

const config间隙表=[['层站','n',66],['门扇间间隙','j',90],['扇与门楣间隙','t',90,],['门扇地坎间隙','s',90]] as Each_ZdSetting[];
export const itemA间隙=['间隙表', '扇间隙','扇间隙r','扇套隙','扇坎隙',];
export const DoorGap=
    React.forwardRef(({ children, show ,alone=true,refWidth,label}:InternalItemProps,  ref
    ) => {
        const [getInpFilter]=useMeasureInpFilter(null, itemA间隙,);
        const {inp, setInp} = useItemInputControl({ ref });
        const headview=<Text variant="h5">
            参照上面样表的第6行的标注的各列的简化后的列名来进行录入,结果2行拆出单独录入。单位：mm
        </Text>;
        const [render间隙表]=useTableEditor({inp, setInp,  headview,
            config: config间隙表, table:'间隙表', column:8});
        return (
            <InspectRecordLayout inp={inp} setInp={setInp} getInpFilter={getInpFilter} show={show}
                                 alone={alone} label={label!}>
                <Text variant="h5">
                    {label} 单位：mm
                </Text>
                样表格式如下：
                <Table  css={{borderCollapse: 'collapse'}} tight miniw={800}>
                    <TableBody>
                        <TableRow><CCell colSpan={3}>项目编号</CCell><CCell colSpan={3}>A3.2.5.1</CCell></TableRow>
                        <TableRow>
                            <CCell colSpan={3}>检验内容</CCell><CCell>层门门扇之间的间间隙</CCell><CCell>层门门扇与立柱、门楣间隙</CCell><CCell>层门扇与地坎间隙</CCell>
                        </TableRow>
                        <TableRow>
                            <CCell rowSpan={2} colSpan={3}>判断标准</CCell><CCell colSpan={3}>新安装检验： x≤6</CCell>
                        </TableRow>
                        <TableRow><CCell colSpan={3}>非首次检验： x≤10</CCell></TableRow>
                        <TableRow>
                            <CCell colSpan={3}>层站</CCell><CCell>门扇间间隙</CCell><CCell>扇与门楣间隙</CCell><CCell>门扇地坎间隙</CCell>
                        </TableRow>
                        <TableRow>
                            <CCell colSpan={3}>测量结果</CCell><CCell></CCell><CCell></CCell><CCell></CCell>
                        </TableRow>
                    </TableBody>
                </Table>
                {render间隙表}
                <hr/>
                上表最后两行结果行的录入拆出来：
                <LineColumn column={6}>
                    <InputLine label={`3.2.5.1层门门扇间间隙-测量结果`}>
                        <Input value={inp?.['扇间隙'] || ''}
                               onChange={e => setInp({...inp, 扇间隙: e.currentTarget.value || undefined})}/>
                    </InputLine>
                    <InputLine label={`3.2.5.1门扇与立柱、门楣间隙-测量结果`}>
                        <Input value={inp?.['扇套隙'] || ''}
                               onChange={e => setInp({...inp, 扇套隙: e.currentTarget.value || undefined})}/>
                    </InputLine>
                    <InputLine label={`3.2.5.1层门扇与地坎间隙-测量结果`}>
                        <Input value={inp?.['扇坎隙'] || ''}
                               onChange={e => setInp({...inp, 扇坎隙: e.currentTarget.value || undefined})}/>
                    </InputLine>
                    <InputLine label={`3.2.5.1 间隙-检验结果`}>
                        <SelectHookfork value={inp?.扇间隙r || ''}
                                        onChange={e => setInp({...inp, 扇间隙r: e.currentTarget.value || undefined})}/>
                    </InputLine>
                </LineColumn>
                {tail间隙}
            </InspectRecordLayout>
        );
} );
//杂物 检测的
export const DoorGapVw= ({children, orc, rep,label } : { orc: any, rep: any,label:any, children?: any}
) => {
    const gcRows=(orc?.间隙表?.length??1);
    return <>
        <div css={{"@media print": {paddingBottom: '5.5rem', pageBreakInside: 'avoid'}}}>
            <Text variant="h4" css={{marginTop: '1rem',
            }}>{label}</Text>
            <div css={{textAlign: 'right'}}>单位：mm</div>
        </div>
        <Table id='Gap' fixed={ ["6%", "11%", "4%","24%","%","24%"] }
                  tight  miniw={800} css={ {borderCollapse: 'collapse', "@media print": {marginTop: '-5.5rem'}} } >
          <TableHead>
              <TableRow><CCell colSpan={3}>项目编号</CCell><CCell colSpan={3}>A3.2.5.1</CCell></TableRow>
              <TableRow>
                  <CCell colSpan={3}>检验内容</CCell><CCell>层门门扇之间的间间隙</CCell><CCell>层门门扇与立柱、门楣间隙</CCell><CCell>层门扇与地坎间隙</CCell>
              </TableRow>
          </TableHead>
         <TableBody>
           <RepLink ori rep={rep} tag={'Gap'}>
               <TableRow>
                   <CCell rowSpan={2} colSpan={3}>判断标准</CCell><CCell colSpan={3}>新安装检验： x≤6</CCell>
               </TableRow>
               <TableRow><CCell colSpan={3}>非首次检验： x≤10</CCell></TableRow>
            { (orc?.间隙表??[{}]).map((o: any, i: number) => {
                 return <TableRow key={i}>
                     {0===i && <CCell  split  rowSpan={gcRows}>观测数据</CCell>}
                     <CCell>{o?.n??'／'}</CCell>
                     <CCell><Text css={{fontSize: '0.7rem'}}>站</Text></CCell>
                     <CCell>{o?.j??'／'}</CCell>
                     <CCell>{o?.t??'／'}</CCell>
                     <CCell>{o?.s??'／'}</CCell>
                 </TableRow>
            })}
            <TableRow>
                <CCell colSpan={3}>测量结果</CCell><CCell>{orc?.扇间隙??'／'}</CCell><CCell>{orc?.扇套隙??'／'}</CCell><CCell>{orc?.扇坎隙??'／'}</CCell>
            </TableRow>
             <TableRow>
                 <CCell colSpan={3}>检验结果</CCell>
                 <CCell colSpan={3}>{orc?.扇间隙r??'／'}</CCell>
             </TableRow>
          </RepLink>
         </TableBody>
        </Table>
        {tail间隙}
    </>;
};
